{extend name="main"}
{block name="style"}
{notempty name="special.pc_bg"}
<style>
    .special-header {
        min-height: 600px;
        background-image: url({$special.pc_bg});
        background-repeat: no-repeat;
        background-position-x: center;
        background-size: auto 600px;
        background-color: #F8F8F8;
        padding-top: 500px;
    }
</style>
{/notempty}
<style>
    .el-select .el-input,
    .w-80px {
        width: 100px;
    }

    .special-nav .el-tabs__header {
        margin: 0;
    }

    .special-nav .el-tabs__nav-scroll {
        padding: 0 1rem;
    }

    .special-booth .el-tabs__item {
        height: 60px;
        line-height: 60px;
        padding: 0 2rem;
    }

    .mx--5 {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }

    .amap-info-content {
        padding: 10 !important;
    }

    .amap-info-close {
        display: none !important;
    }

    .is-lock.bg-danger .text-primary,
    .is-lock.bg-danger .text-secondary {
        color: #FFFFFF !important;
    }

    .is-lock.bg-success .text-primary,
    .is-lock.bg-success .text-secondary {
        color: #FFFFFF !important;
    }

    .block-title {
        background-color: #4B76EA;
    }

    .block-title .el-divider__text {
        color: #4B76EA;
        background-color: #FFFFFF;
        white-space: nowrap;
    }
</style>
{/block}
{block name="header"}
{include file="module/top_nav" container="container-xl"/}
{include file="module/header_concise"/}
{/block}
{block name="body"}
<div class="special-header pb-3">
    <div class="container-xl">
        <div class="bg-white py-5">
            <h4 class="mb-0 text-center">{$special.title}</h4>
        </div>
        <div class="bg-white py-3 flex flex-v-center text-center text-secondary">
            <div class="px-5">
                <div class="text-FF8221 h4 mb-0 font-weight-bold px-1">{$special.company_sum + $special.base_enroll}</div>
                报名企业
            </div>
            <div class="px-5">
                <div class="text-FF8221 h4 mb-0 font-weight-bold px-1">{$special.jobs_sum}</div>
                可投职位
            </div>
            <div class="px-5">
                <div class="text-FF8221 h4 mb-0 font-weight-bold px-1">{$special.view + $special.base_view}</div>
                浏览量
            </div>
        </div>
        <div class="p-5 bg-white text-grey">
            {$special.content}
        </div>
    </div>
    <div class="container-xl">
        <div class="row company-icon-list pt-3">
            {volist name="companyList" id="v"}
            <div class="col-3">
                <div class="company-icon-item pointer">
                    <a href="/company/{$v.id}.html" target="_blank" class="text-dark px-3 pt-4 pb-3">
                        <img src="{$v.logo}">
                        {empty name="v.stitle"}
                        <h5 class="text-truncate px-2 mb-0 pt-4">{$v.title}</h5>
                        {else/}
                        <h5 class="text-truncate px-2 mb-0 pt-4">{$v.stitle}</h5>
                        {/empty}
                        <div class="small text-grey flex text-v-center mt-3">
                            <div>{$v.size_type}</div>
                            <div class="border-left py-1 mx-1"></div>
                            <div>{$v.industry}</div>
                        </div>
                        <div class="border-top pt-3 mt-3 flex flex-center border-grey">
                            <div class="flex-1">
                                <div class="h6 text-dark">{$v.jobs_sum}个</div>
                                <div class="small text-grey">在招职位</div>
                            </div>
                            <div class="border-left py-3"></div>
                            <div class="flex-1">
                                <div class="h6 text-dark">{$v.resume_efficiency}%</div>
                                <div class="small text-grey">简历处理率</div>
                            </div>
                            <div class="border-left py-3"></div>
                            <div class="flex-1">
                                <div class="h6 text-dark">1天</div>
                                <div class="small text-grey">简历处理用时</div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            {/volist}
        </div>
        <div class="text-center mt-3" v-if="special.status == 1">
            <el-button style="width: 218px;height:34px;line-height: 34px;padding: 0;" type="primary" @click="enroll">
                我要报名
            </el-button>
        </div>
    </div>
</div>
{/block}


{block name="footer"}
{include file="module/footer"/}
{include file="module/login"/}
{include file="module/buy_win"/}
{/block}
{block name="script"}
<script>
    var special = JSON.parse('{:json_encode($special);}'.replace(/[\r\n\s+]/g, '\\n'));
</script>
<script type="text/javascript">
    var map = null;
    var vm = new Vue({
        el: '#app',
        data: {
            view: XYBase.view,
            loginTabs: XYBase.loginTabs,
            feedback: XYBase.feedback,
            buy: XYBase.buy,
            userInfo: UserInfo,
            special,
        },
        created() {
            XYBase.created(this);
        },
        methods: XYBase.methods({
            enroll() {
                if (this.userInfo.id == 0) {
                    // XYBase.msg('请先登录企业账号！');
                    this.loginTabs.loginWin=true;
                    return;
                }
                if (this.userInfo.role_type != 1) {
                    XYBase.msg('只有企业身份才可以报名！');
                    return;
                }
                // 请求接口尝试报名
                $.ajax({
                    url: '/special/enroll',
                    data: { id: this.special.id },
                    type: 'POST',
                    success(res) {
                        if (res.code == undefined) {
                            XYBase.error('网络错误！');
                            return;
                        }
                        if (res.code == 0) {
                            XYBase.success('报名成功！');
                        } else {
                            XYBase.msg(res.msg);
                        }
                    }
                })
            }
        })
    });
</script>
{/block}